<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../../pqgrid/pqgrid.min.css" />
    <script src="../../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../../pqgrid/themes/office/pqgrid.css" />

<script>
    
    $(function () {
        var colModel= [
            { title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 80 },
            { title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName" },
            { title: "Quantity Per Unit", width: 140, dataType: "string", align: "right", dataIndx: "QuantityPerUnit" },
            { title: "Unit Price", width: 100, dataType: "float", align: "right", dataIndx: "UnitPrice" },                
            { title: "Units In Stock", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsInStock" },
            { title: "Discontinued", width: 100, dataType: "bool", align: "center", dataIndx: "Discontinued" }
        ];
        var dataModel = {
            location: "remote",
            dataType: "jsonp",
            method: "GET",
            url: "/pro/products/get_jsonp",
            //url: "/pro/products.php",//for PHP
            getData: function (dataJSON) {
                var data = dataJSON.data;
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
            }
        };

        $("#grid_jsonp").pqGrid({
            height: 450,
            scrollModel: {autoFit: true},
            dataModel: dataModel,
            colModel: colModel,                                                            
            numberCell: { resizable: true, width: 30, title: "#" },
            title: "Products",
            resizable: true
        });
    });


        
</script>    
</head>
<body>

    <div id="grid_jsonp" style="margin:5px auto;"></div>

</body>

</html>
